<!--
 * @Descripttion: 出手鸭小程序
 * @version:1.0.1 
 * @Author: HHL
 * @Date: 2023-10-11 15:07:29
 * @LastEditTime: 2025-06-26 20:36:53
 * @LastEditors: sueRimn
-->

<template>
  <uni-popup ref="popup" type="right" :safe-area="false" mask-background-color="rgba(0,0,0,0.6)" @change="popupChange" @touchmove.stop.prevent>
    <view class="product-box" @touchmove.stop>
      <view class="close-btn d-flex justify-content-center align-content-center" @click="onClose">
        <view class="popup-back d-flex flex-column justify-content-center align-content-center">
          <uni-icons custom-prefix="iconfont" type="icon-left" size="24" color="#fff"></uni-icons>
          点击返回
        </view>
      </view>

      <!-- 系列列表 start -->
      <view class="series-list" v-show="seriesList.length">
        <scroll-view scroll-x class="series-tab d-flex" :enable-flex="true">
          <view class="series-tab-box">
          <view class="item" v-for="(item, index) in seriesList" :key="index"
            :class="item.seriesId === seriesId ? 'active' : ''" @click="handleSeriesClick(item.seriesId)">
            <view class="text">{{ item.seriesName }}</view>
          </view>
          </view>
        </scroll-view>
      </view>
      <!-- 系列列表 end -->

      <!-- 商品列表 start -->
      <view class="product-list">
        <scroll-view scroll-y :style="{ height: height + 'px' }" @scrolltolower="loadProductListMore"
          :lower-threshold="320">
          <load-list :loading="loading" :loadMore="loadMore" :haveMore="haveMore" :list="list" noDataText="暂无商品">
            <template #default>
              <view class="item d-flex" v-for="item in list" :key="item.productId"
                @click="$emit('handleProductClick', item)">
                <view class="image">
                  <common-image
                    :src="item.productImage ? item.productImage + '?x-oss-process=image/resize,m_fill,w_104' : ''"
                    :styles="'width: 104rpx; height: 104rpx; display: block; border-radius: 20rpx;mix-blend-mode: multiply;'" />
                </view>
                <view class="info d-flex flex-column">
                  <view class="name">{{ item.productName }}</view>
                  <view class="price d-flex align-items-end">
                    <text class="desc">最高可卖</text>
                    <text class="yuan">￥</text>
                    <text>{{ item.maxPrice }}</text>
                  </view>
                </view>
              </view>
            </template>
          </load-list>
        </scroll-view>
      </view>
      <!-- 商品列表 end -->

    </view>
  </uni-popup>
</template>

<script>

import { fetchProductList, fetchSeriesList } from '@/api'
import Skeleton from "@/components/skeleton/skeleton.vue"

export default {
  props: {
    height: { type: Number, default: 0 },
    categoryId: { type: Number, default: 0 },
    brandId: { type: Number, default: 0 },
  },
  components: { Skeleton },

  data() {
    return {
      seriesList: [],
      seriesId: 0,

      loading: true,
      loadMore: false, // 正在加载中更多数据
      haveMore: true, // 是否还有更多数据
      page: 1,
      size: 20,
      list: [],
      showSkeleton: true,
    }
  },

  methods: {
    onOpen() {
      this.$refs.popup.open()
    },

    onClose() {
      this.$refs.popup.close()
    },

    popupChange({ show }) {
      if (show) {
        this.loadSeries()
        this.onReset()
        // 禁止页面滚动
        this.disablePageScroll()
      } else {
        // 恢复页面滚动
        this.enablePageScroll()
      }
    },

    // 禁止页面滚动
    disablePageScroll() {
      // #ifdef H5
      document.body.style.overflow = 'hidden'
      document.body.style.position = 'fixed'
      document.body.style.width = '100%'
      // #endif
    },

    // 恢复页面滚动
    enablePageScroll() {
      // #ifdef H5
      document.body.style.overflow = ''
      document.body.style.position = ''
      document.body.style.width = ''
      // #endif
    },

    loadSeries() {
      this.seriesList = []
      fetchSeriesList({
        categoryId: this.categoryId,
        brandId: this.brandId,
      }).then(({ code, data }) => {
        if (code === 200) {
          this.seriesList = [
            { seriesId: 0, seriesName: '全部' },
            ...data
          ]
        }
      })
    },

    loadList() {
      try {
        fetchProductList({
          categoryId: this.categoryId,
          brandId: this.brandId,
          seriesId: this.seriesId || 0,
          page: this.page,
          size: this.size,
        }).then(({ data, code }) => {
          if (code === 200) {
            if (data.rows.length === 0) {
              this.haveMore = false
            }
            if (data && data.rows && data.rows.length) {
              if (data.rows.length >= this.size) {
                this.haveMore = true
              } else {
                this.haveMore = false
              }
              const list = [...this.list, ...data.rows]
              this.list = list
            }

          }
        })
      } finally {
        setTimeout(() => {
          this.loadMore = false
          this.loading = false
        }, 200)
      }
    },

    // 系列点击
    handleSeriesClick(id) {
      if (this.seriesId === id) { return }
      this.seriesId = id
      this.onReset()
    },

    // 加载更多
    loadProductListMore() {
      if (!this.loadMore && this.haveMore) {
        this.loadMore = true
        this.page = Number(this.page) + 1
        this.$nextTick(() => {
          this.loadList()
        })
      }
    },

    onReset() {
      this.loadMore = true
      this.page = 1
      this.list = []
      this.loading = true
      this.$nextTick(() => {
        this.loadList()
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.series-tab-box{
  display: flex;
}
.product-box {
  background: #FFFFFF;
  width: 628rpx;
  height: 100%;
  padding: 100rpx 0 0rpx 0;
}

.close-btn {
  position: absolute;
  left: -122rpx;
  top: 50%;
  bottom: 0;
  width: 122rpx;
  height: 174rpx;
  transform: translateY(-50%);

  .popup-back {
    width: 60rpx;
    height: 174rpx;
    color: #FFFFFF;
    text-align: center;
  }
}

.series-list {
  padding: 0 32rpx 0rpx;

  .series-tab {
    white-space: nowrap;
    height: 60rpx;
  }

  .item {




    &:last-child {
      margin-right: 0;
    }

    .text {
      height: 50rpx;
      line-height: 50rpx;
      display: inline-block;
      padding: 0 24rpx;
      background: #F1F1F1;
      border: 1px solid #F1F1F1;
      border-radius: 30rpx;
      margin: 0 10rpx 0rpx 0;
      text-align: center;
      font-size: var(--hui-font-size-26);
      color: #999;
    }

    &.active {
      .text {
        border: solid 1px var(--hui-bg-button);
        background: #E2FFFF;
        color: var(--hui-color-title);
      }
    }
  }
}

.product-list {
  .item {
    padding: 20rpx 20rpx 0 28rpx;

    .image {
      background: #F7F7F7;
      border-radius: 16rpx;
      width: 110rpx;
      height: 110rpx;
    }

    .info {
      padding: 0 0 0 18rpx;

      .name {
        line-height: 36rpx;
        height: 36rpx;
        width: 400rpx;
        margin: 5rpx 0 0 0;
        font-size: var(--hui-font-size-28);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .price {
        font-size: var(--hui-font-size-28);
        color: #1F1F1F;
        line-height: 1;
        padding:12rpx 0 0 0;
        color: var(--hui-color-danger);
      }

      .yuan {
        font-size: var(--hui-font-size-24);
        color: var(--hui-color-danger);
      }

      .desc {
        font-size: var(--hui-font-size-24);
        color: var(--hui-color-subtitle);
      }
    }
  }
}
</style>